<template>
  <div id="info_table">
    <el-table
      :data="tableData"
      :height="tableHeight"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        v-for="item in tableHead"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :sortable="item.sortable"
        :show-overflow-tooltip="true"
        :align="item.align"
      >
        <template slot-scope="scope">
          <div class="table-cell">
            {{ scope.row[item.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    export default {
        // filters: {
        //     defaultVal(value) {
        //         if(!value) return '-'
        //         value = value.toString()
        //         return value
        //     }
        // },
        props: {
            tableData: {
                type: Array,
                default: () => []
            },
            tableHead: {
                type: Array,
                default: () => []
            },
            tableHeight: {
                type: [String,Number],
                default: () => ""
            },
        },
        watch: {
            tableHeight(val) {
                console.log(val);

            }
        },
        data() {
            return {

            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                row
                if (rowIndex % 2 == 1) {
                return 'warning-row';
                } else if (rowIndex % 2 == 0) {
                return 'success-row';
                }
                return 'warning-row';
            }
        }
    }
</script>

<style lang="scss">
    #info_table {
        .el-table {
            background: transparent;
        }
        .el-table th,.el-table tr {
            background: transparent; //#0960bf
        }
        .el-table--medium th, .el-table--medium td {
            padding: 5px 0;
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
            background-color: rgba($color: #0d72dd, $alpha: 0.3);
        }
        .el-table th.is-leaf, .el-table td {
            border: none
        }
        .el-table--group::after, .el-table--border::after, .el-table::before {
            background: transparent;
        }
        .el-table .warning-row {
            background: transparent;
        }
        .el-table__header-wrapper .cell {
            color: #0960bf;
        }
        .el-table__body-wrapper .cell {
            color: rgba(255, 255, 255, 0.87);
        }
        .el-table .success-row {
            background: rgba($color: #0e046e, $alpha: 0.4);
        }
    }
</style>
